<template>
  <view class="comment-container">
    <view class="top-bar">
      <view style="flex-grow: 1">
        <u-search v-model="keyword" :show-action="false" placeholder="搜索帖子"></u-search>
      </view>
      <view class="post-btn" @click="goToAdd">+ 发帖</view>
    </view>
      <scroll-view scroll-y class="comment-scroll">
        <view class="comment-list">
          <view class="comment-item" v-for="(item, index) in posts" :key="index" @click="goToDetail(item)">
          <view class="user-info">
            <image class="avatar" :src="item.user.avatar_url" mode="aspectFill" />
            <view class="user-detail">
              <text class="username">{{ item.user.nickname }}</text>
            </view>
          </view>
          <view class="content">{{ item.content }}</view>
          <view v-if="item.images" class="image-grid">
            <image
              v-for="(img, imgIndex) in item.images.split(',')"
              :key="imgIndex"
              class="post-image"
              :src="img"
              mode="aspectFill"
              @click.stop="previewImage(item.images.split(','), imgIndex)"
            />
          </view>
          <view class="meta">
            <text class="time">{{ item.create_time }}</text>
            <view class="actions">
<!--              <text class="iconfont icon-like">👍</text>-->
<!--              <text>{{ item.likes.length }}</text>-->
              <text class="iconfont icon-comment">💬</text>
              <text>{{ item.comments.length }}</text>
            </view>
          </view>
        </view>
        </view>
      </scroll-view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				posts: [],
				keyword: '',
				pageNo: 1,
				pageSize: 10,
				total: 0,
				loading: false
			}
		},
		onLoad() {
			this.getPostList()
		},
		onReachBottom() {
			if (this.posts.length < this.total) {
				this.pageNo++
				this.getPostList()
			}
		},
		methods: {
			previewImage(urls, current) {
				uni.previewImage({
					urls,
					current: urls[current]
				})
			},
			async getPostList() {
				if (this.loading) return
				this.loading = true
				try {
					const res = await this.$api.getPostPage({
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						keyword: this.keyword
					})
					if (this.pageNo === 1) {
						this.posts = res.list
					} else {
						this.posts = [...this.posts, ...res.list]
					}
					this.total = res.total
				} catch (error) {
					console.error('获取帖子列表失败:', error)
					uni.showToast({
						title: '获取帖子列表失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			goToAdd() {
				uni.navigateTo({ url: '/pages/comment/add' });
			},
			goToDetail(item) {
				uni.navigateTo({
					url: "/pages/comment/detail?id=" + item.id
				})
			}
		}
	}
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden
}
.comment-container {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .comment-scroll {
    flex-grow: 1;
    overflow: hidden;
  }
  .top-bar {
    display: flex;
    align-items: center;
    padding: 24rpx;
    background: #ffffff;
  }
  .search-box {
    flex: 1;
    margin-right: 16rpx;
  }
  .search-input {
    width: 100%;
    height: 64rpx;
    border-radius: 32rpx;
    background: #fff;
    border: none;
    padding: 0 24rpx;
    font-size: 28rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  }
  .post-btn {
    background: #3478f6;
    color: #fff;
    border: none;
    border-radius: 32rpx;
    font-size: 28rpx;
    padding: 0 32rpx;
    height: 64rpx;
    line-height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24rpx;
  }
  .comment-list {
    min-height: 100%;
    background: #f8f9fa;
    padding: 32rpx;
  }
  .comment-item {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 32rpx;
    padding: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  }
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;
  }
  .avatar {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    margin-right: 16rpx;
  }
  .user-detail {
    display: flex;
    flex-direction: column;
  }
  .username {
    font-weight: bold;
    font-size: 30rpx;
  }
  .school {
    font-size: 22rpx;
    color: #888;
    background: #f2f2f2;
    border-radius: 20rpx;
    padding: 2rpx 16rpx;
    margin-top: 4rpx;
    align-self: flex-start;
  }
  .content {
    font-size: 28rpx;
    margin-bottom: 12rpx;
    color: #222;
  }
  .image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8rpx;
    margin: 12rpx 0;
  }
  .post-image {
    width: 100%;
    height: 200rpx;
    border-radius: 8rpx;
    object-fit: cover;
  }
  .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 22rpx;
    color: #999;
  }
  .actions {
    display: flex;
    align-items: center;
    gap: 18rpx;
  }
}
</style>
